<template>
	<div>
		<div class="application-main">
			<Row style="margin: 10px 0;">
				<Col span="4">
				<div class="application-index-card">
					<div class="application-index-card-title">应用状态<span>{{appStatus}}</span></div>
					<div class="application-index-card-body"><img :src="imgUrl" class="animg"></div>
				</div>
				</Col>
				<Col span="4">
				<div class="application-index-card">
					<div class="application-index-card-title">内核数量</div>
					<div class="application-index-card-body">{{cpu}}</div>
				</div>
				</Col>
				<!-- <Col span="4">
				<div class="application-index-card">
					<div class="application-index-card-title">吞吐率（dps）</div>
					<div class="application-index-card-body">{{dps}}</div>
				</div>
				</Col> -->
				<Col span="8">
				<div class="application-index-card">
					<div class="application-index-card-title">CPU利用率（%）</div>
					<div class="application-index-card-body load">{{load}}</div>
				</div>
				</Col>
				<Col span="8">
				<div class="application-index-card" style="margin-right: 0">
					<div class="application-index-card-title">内存已使用量</div>
					<div class="application-index-card-body">
						{{memories}}
					</div>
				</div>
				</Col>
			</Row>
			<div class="application-index-card" style="margin: 0;min-height: 400px">
				<div class="application-index-card-title">操作日志</div>
				<div class="application-index-log">
					<Timeline>
						<TimelineItem class="flagHeight" v-for="(item, index) in dynamicList" :key="index">
							<div class="time">{{formatDate(item.actionDate)}}</div>
							<div class="content">
								<template v-if="item.description !== null">
									{{item.userName}}{{item.description}}
								</template>
								<template v-if="item.description === null">
									{{item.userName}}操作错误,错误原因:{{item.exceptionDetail}}
								</template>
							</div>
							<div class="clear"></div>
						</TimelineItem>
					</Timeline>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				dps: 8888,
				cpu: '',
				load: '',
				index: '',
				statusList: [
					{
						status: '运行中',
						pictrue: '../../../static/images/status-start.png'
					},
					{
						status: '停止',
						pictrue: '../../../static/images/status-end.png'
					},
					{
						status: '重启中',
						pictrue: '../../../static/images/status-reset.png'
					}
				],
				appStatus: '',
				imgUrl: '',
				page: 1,
				limit: 5,
				dynamicList: [],
				memories: ''
			}
		},
		watch: {
			status: function (val) {
				this.appStatus = this.statusList[val - 1].status
				this.imgUrl = this.statusList[val - 1].pictrue
			}
		},
		computed: {
			status: function () {
				return this.$store.state.status
			}
		},
		methods: {
			getList () {
				this.$api.get(0, '/kuber/con/page/info?page=1&limit=5&owner=' + sessionStorage.username + '&containerName=' + sessionStorage.containerName, {}, r => {
					var status = JSON.stringify(r.data.data.data[0].stats)
					if (status.indexOf('running') !== -1) {
						status = '运行中'
					} else {
						status = '停止'
					}
					for (let i = 0; i < this.statusList.length; i++) {
						if (status === this.statusList[i].status) {
							this.appStatus = this.statusList[i].status
							this.imgUrl = this.statusList[i].pictrue
						}
					}
					this.cpu = r.data.data.data[0].otherInfo.cpu.usage.per_cpu_usage.length
					this.load = r.data.data.data[0].load
				})
			},
			getJournal () {
				this.$api.get(0, '/kuber/log/page?userName=' + sessionStorage.username + '&page=' + this.page + '&limit=' + this.limit, {},
					data => {
						if (data.data.code === 0) {
							this.dynamicList = data.data.data.content
						}
					})
			},
			formatDate (date) {
				var date1 = new Date(date).toString().replace(/-/g, '/')
				var date2 = new Date(+new Date(date1) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
				return date2
			},
			getMemories () {
				this.$api.get(0, '/kuber/con/count?owner=' + sessionStorage.username, {}, data => {
					if (data.data.code === 0) {
						let memory = data.data.data.memories / 1048576
						if (memory === 0) {
							this.memories = ''
						} else {
							if (memory > 1024) {
								memory = parseFloat((memory / 1024).toFixed(2)) + 'GB'
							} else {
								memory = parseFloat(memory.toFixed(2)) + 'MB'
							}
							this.memories = memory
						}
					}
				})
			}
		},
		mounted () {
			this.getList()
			this.getJournal()
			this.getMemories()
		}
	}
</script>

<style lang="scss">
	.flagHeight {
		height: 80px
	}

	.application-index-card {
		margin-right: 15px;
		background-color: #ffffff;
		border-radius: 6px;
		padding: 10px 20px;
	}

	.application-index-card-title {
		border-left: 2px solid #d00210;
		font-size: 18px;
		padding-left: 10px;
		line-height: 1;

		span {
			float: right;
			font-size: 14px;
			color: #32a238;
		}
	}

	.application-index-card-body {
		text-align: center;
		padding: 20px 0;
		font-size: 60px;
		color: #848484;
		height: 122px;
	}

	.application-index-card-body-one {
		font-size: 14px;
		color: #101010;
		text-align: left;
		box-sizing: border-box;
		padding: 10px 0;
	}

	.applicationStyle {
		height: 50%;
	}

	.application-index-card-body-one-title {
		float: left;
		width: 10%;
		padding-right: 5px;
		text-align: right;
	}

	.application-index-card-body-line-con {
		float: left;
		width: 68%;
		/*height: 20px;*/
		/*padding-top: 8px;*/
	}

	.application-index-card-body-line {
		height: 2px;
		background-color: #faa858;
	}

	.application-index-card-body-line-active {
		height: 2px;
		background-color: #d00210;
		margin-top: -2px;
	}

	.application-index-card-body-one-unit {
		float: left;
		width: 22%;
		padding-left: 5px;

		span {
			color: #d00210;

			&:first-child {
				color: #848484;
			}
		}
	}

	.application-index-log {
		margin: 30px 0;
		font-size: 14px;

		.ivu-timeline-item {
			padding-bottom: 30px;

			.ivu-timeline-item-head {
				left: 155px;
				top: 15px;
			}

			.ivu-timeline-item-tail {
				left: 160px;
				border-left: 3px solid #d00210;
			}

			.ivu-timeline-item-content {
				padding-bottom: 0;
			}

			.time {
				float: left;
				width: 180px;
				font-size: 12px;
				color: #848484;
				margin-top: 15px;
				span {
					font-size: 18px;
					color: #101010;
				}
			}

			.content {
				float: left;
				font-size: 14px;
				padding: 15px 20px 15px 5px;

				span {
					color: #d00210;
				}
			}

			.btn {
				float: right;
				margin-right: 20px;
				padding: 15px 0;
				font-size: 14px;

				a {
					color: #848484;

					&:hover {
						color: #d00210;
					}
				}
			}
		}

		.ivu-timeline-item:last-child .ivu-timeline-item-tail {
			display: block;
			border-image: linear-gradient(#d00210, #ffffff) 0 30;
		}
	}

	@media(max-width:1366px) {
		.application-main {
			padding: 0;
		}

		.application-index-card-title {
			font-size: 16px
		}

		.application-index-card-body-line-con {
			width: 65%
		}

		.application-index-card-body-one-unit {
			width: 24%
		}
	}
</style>
